<template>
    <div class="header_container">
        <div class="title">
            <h3>叩丁狼电商运营平台</h3>
            <el-icon @click="changeCollapse">
                <Menu />
            </el-icon>
        </div>
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{ username.username }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown, Menu } from '@element-plus/icons-vue'
// import { useMenuHiden } from "../store/MenuHiden.ts"
import { loginOut } from "../common/index"
import { useUserInfoStore } from '../store/useStore';
import { ElMessage } from 'element-plus';


const username = useUserInfoStore()

// const useHiden = useMenuHiden()

// const hiden = () => {
//     useHiden.upDateHiden()
// }
const handleCommand = (command: string | number | object) => {
    if (command === "exit") {
        loginOut(function () {
            ElMessage.success("退出成功")
        })
    } else {
        console.log("去首页");

    }
}

const emits = defineEmits<{
    (event: string ): void
}>()

const changeCollapse = () => {
    emits("changeCollapse")
}
</script>

<style scoped lang="less">
.header_container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    .title {
        h3 {
            margin-right: 20px;
        }

        display: flex;
        align-items: center;
    }
}

.el-tooltip__trigger {
    cursor: pointer;
    outline: none;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>